<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播放 - 小说转有声书APP</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        .player-container {
            padding: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .book-cover-large {
            width: 250px;
            height: 375px;
            object-fit: cover;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            margin-bottom: 2rem;
        }
        
        .player-progress-bar {
            width: 100%;
            height: 6px;
            background-color: var(--bg-secondary);
            border-radius: 3px;
            overflow: hidden;
            margin: 1rem 0;
            position: relative;
            cursor: pointer;
        }
        
        .player-progress-fill {
            height: 100%;
            background-color: var(--primary-color);
            width: 35%; /* 演示用，实际应根据播放进度动态设置 */
        }
        
        .time-display {
            display: flex;
            justify-content: space-between;
            width: 100%;
            color: var(--text-secondary);
            font-size: 0.875rem;
        }
        
        .player-controls-main {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            margin: 2rem 0;
        }
        
        .control-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text-primary);
            transition: all 0.2s;
        }
        
        .control-btn:hover {
            color: var(--primary-color);
        }
        
        .control-btn.primary {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .control-btn.primary:hover {
            background-color: var(--accent-color);
            transform: scale(1.05);
        }
        
        .control-btn.primary .icon {
            font-size: 36px;
        }
        
        .player-controls-secondary {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: 1rem;
        }
        
        .speed-selector {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem;
            border: 1px solid var(--border-color);
            border-radius: 0.25rem;
            cursor: pointer;
        }
        
        .chapter-navigation {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
        }
        
        .chapter-list {
            max-height: 300px;
            overflow-y: auto;
            margin-top: 1rem;
            border: 1px solid var(--border-color);
            border-radius: 0.5rem;
        }
        
        .chapter-item {
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
        }
        
        .chapter-item:hover {
            background-color: var(--bg-secondary);
        }
        
        .chapter-item.active {
            background-color: rgba(99, 102, 241, 0.1);
            border-left: 3px solid var(--primary-color);
        }
        
        .chapter-item:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="navbar">
        <div class="flex items-center gap-2">
            <a href="home.html" class="icon">arrow_back</a>
            <h1>正在播放</h1>
        </div>
        <div class="flex items-center gap-2">
            <span class="icon">bookmark</span>
            <span class="icon">more_vert</span>
        </div>
    </header>
    
    <div class="container" style="margin-bottom: 60px;">
        <div class="player-container">
            <!-- 书籍封面 -->
            <img src="https://via.placeholder.com/250x375?text=三体" alt="书籍封面" class="book-cover-large">
            
            <!-- 书籍信息 -->
            <h2>三体</h2>
            <p>刘慈欣 · 科幻小说</p>
            <p class="badge my-2">第14章 · 面壁计划</p>
            
            <!-- 播放进度条 -->
            <div class="player-progress-bar">
                <div class="player-progress-fill"></div>
            </div>
            
            <!-- 时间显示 -->
            <div class="time-display">
                <span>12:34</span>
                <span>35:47</span>
            </div>
            
            <!-- 主控制区 -->
            <div class="player-controls-main">
                <button class="control-btn">
                    <span class="material-icons" style="font-size: 36px;">skip_previous</span>
                </button>
                <button class="control-btn">
                    <span class="material-icons" style="font-size: 36px;">replay_10</span>
                </button>
                <button class="control-btn primary">
                    <span class="material-icons">play_arrow</span>
                </button>
                <button class="control-btn">
                    <span class="material-icons" style="font-size: 36px;">forward_30</span>
                </button>
                <button class="control-btn">
                    <span class="material-icons" style="font-size: 36px;">skip_next</span>
                </button>
            </div>
            
            <!-- 次要控制区 -->
            <div class="player-controls-secondary">
                <button class="control-btn">
                    <span class="material-icons">volume_up</span>
                </button>
                
                <div class="speed-selector">
                    <span>1.0x</span>
                    <span class="material-icons">arrow_drop_down</span>
                </div>
                
                <button class="control-btn">
                    <span class="material-icons">timer</span>
                </button>
            </div>
        </div>
        
        <!-- 章节导航 -->
        <div class="card">
            <div class="flex justify-between items-center">
                <h3>章节列表</h3>
                <span class="badge">共298章</span>
            </div>
            
            <div class="chapter-list">
                <div class="chapter-item">
                    <div class="flex justify-between">
                        <span>第12章 · 三体问题</span>
                        <span class="text-secondary">已听完</span>
                    </div>
                </div>
                
                <div class="chapter-item">
                    <div class="flex justify-between">
                        <span>第13章 · ETO</span>
                        <span class="text-secondary">已听完</span>
                    </div>
                </div>
                
                <div class="chapter-item active">
                    <div class="flex justify-between">
                        <span>第14章 · 面壁计划</span>
                        <span class="text-secondary">35%</span>
                    </div>
                </div>
                
                <div class="chapter-item">
                    <div class="flex justify-between">
                        <span>第15章 · 面壁者</span>
                        <span class="text-secondary">未听</span>
                    </div>
                </div>
                
                <div class="chapter-item">
                    <div class="flex justify-between">
                        <span>第16章 · 监听者</span>
                        <span class="text-secondary">未听</span>
                    </div>
                </div>
            </div>
            
            <div class="chapter-navigation mt-4">
                <button class="btn btn-secondary">
                    <span class="icon">keyboard_arrow_up</span>
                    上一章
                </button>
                <button class="btn btn-secondary">
                    <span class="icon">keyboard_arrow_down</span>
                    下一章
                </button>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <nav class="bottom-nav">
        <a href="home.html" class="bottom-nav-item">
            <span class="material-icons bottom-nav-icon">home</span>
            <span>首页</span>
        </a>
        <a href="library.html" class="bottom-nav-item">
            <span class="material-icons bottom-nav-icon">library_books</span>
            <span>书库</span>
        </a>
        <a href="import.html" class="bottom-nav-item">
            <span class="material-icons bottom-nav-icon">add_circle</span>
            <span>导入</span>
        </a>
        <a href="player.html" class="bottom-nav-item active">
            <span class="material-icons bottom-nav-icon">headphones</span>
            <span>播放</span>
        </a>
        <a href="settings.html" class="bottom-nav-item">
            <span class="material-icons bottom-nav-icon">settings</span>
            <span>设置</span>
        </a>
    </nav>
</body>
</html> 